import { ref, onMounted, onUnmounted, Ref } from "vue";
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
    const isClickOutside=ref(false)
    const handler=(e:MouseEvent)=>{
        if(elementRef.value){
            if(elementRef.value.contains(e.target as HTMLElement)){
                isClickOutside.value=false
            }else{
                isClickOutside.value=true
            }
        }
    }
    onMounted(()=>{
        document.addEventListener('click',handler)
    })
    onUnmounted(()=>{
        document.removeEventListener('click',handler)
    })
    return isClickOutside
};

export default useClickOutside
